Vue.js+Bootstrap Web開發案例教程
內容描述
隨著互聯網技術的不斷發展，HTML5、CSS3、JavaScript語言及其相關技術越來越受人們的關註，各種前端框架層出不窮。Vue.js和Bootstrap作為前端框架中的優秀代表，為廣大開發者提供了諸多便利，在Web開發技術中占據著重要地位。本書內容翔實、結構清晰，通過豐富的案例詳細講解了Vue.js和Bootstrap框架的相關技術。在Vue.js部分，講解了計算屬性、偵聽器、樣式控制、事件處理、表單綁定、結構渲染、組件等核心基礎知識；在此基礎上，講解組件化開發的完整邏輯；最後拓展講解了AJAX、路由、狀態管理等高級內容。在Bootstrap部分，主要講解了工具類、柵格佈局、表單樣式和常用組件等內容。本書使用了大量案例幫助讀者理解這兩個框架的使用方法，同時演示了綜合使用這兩個框架進行Web開發的方法。本書既可作為高等院校相關專業的網頁設計與製作、前端開發等課程的教材，也可作為Vue.js和Bootstrap初學者的入門用書。
目錄大綱
章名目錄【第 一篇】 Vue.js程序開發第 1章 Vue.js開發基礎第 2章 計算屬性與偵聽器第3章 控制頁面的CSS樣式第4章 事件處理第5章 表單綁定第6章 結構渲染第7章 組件基礎第8章 單文件組件第9章 AJAX與axios第 10章 過渡和動畫第 11章 Vue.js插件【第二篇】 Bootstrap程序開發第 12章 Bootstrap基礎第 13章 CSS原子化與工具類第 14章 Bootstrap的柵格佈局第 15章 Bootstrap的表單樣式第 16章 Bootstrap的常用組件【第三篇】 綜合實戰第 17章 綜合案例：產品著陸頁第 18章 綜合案例：“豪華版”待辦事項## 詳細目錄【第 一篇】 Vue.js程序開發第 1章 Vue.js開發基礎1.1 Web前端開發概述 21.1.1 Web開發簡史 21.1.2 基於前後端分離模式的Web開發 31.1.3 Vue.js與MVVM模式 41.1.4 安裝Vue.js 71.1.5 上手實踐：第 一個Vue.js程序 81.2 Vue.js開發入門 101.2.1 Vue根實例 101.2.2 Vue實例的生命周期 19本章小結 21習題1 21第 2章 計算屬性與偵聽器2.1 計算屬性 222.1.1 定義計算屬性 222.1.2 計算屬性的緩存特性 242.2 偵聽器 272.2.1 偵聽器的應用場景 272.2.2 偵聽器的基本用法 282.2.3 深度偵聽 292.2.4 偵聽對象時獲取對象原值 302.2.5 使用immediate參數 312.2.6 對數組的偵聽 32本章小結 35習題2 35第3章 控制頁面的CSS樣式3.1 綁定class屬性 363.1.1 以對象方式綁定 class屬性 363.1.2 將class屬性與對象變量綁定 383.1.3 以數組方式綁定class屬性 393.1.4 動態改變class屬性值 403.1.5 在數組中使用對象 403.2 綁定style屬性 413.2.1 以對象方式綁定style屬性 413.2.2 將style屬性與對象變量綁定 423.2.3 以數組方式綁定style屬性 433.2.4 動態改變style屬性值 43本章小結 44習題3 44第4章 事件處理4.1 標準DOM中的事件 454.1.1 事件與事件流 454.1.2 事件對象 464.2 使用Vue.js處理事件 474.2.1 內聯方式響應事件 484.2.2 事件處理方法 484.2.3 在Vue.js中使用事件對象 504.3 動手練習：監視鼠標移動 514.4 事件修飾符 524.4.1 準備基礎頁面 524.4.2 .stop修飾符 534.4.3 .self修飾符 534.4.4 .capture修飾符 544.4.5 .once修飾符 544.4.6 .prevent修飾符 544.4.7 事件修飾符的使用說明 554.4.8 按鍵修飾符 55本章小結 58習題4 58第5章 表單綁定5.1 輸入文本的綁定 595.1.1 文本框 595.1.2 多行文本框 605.2 選擇類表單元素的綁定 615.2.1 單選按鈕 615.2.2 復選框 625.2.3 下拉框 635.2.4 多選列表框 635.2.5 鍵值對綁定 645.3 修飾符 655.3.1 .lazy修飾符 655.3.2 .number修飾符 655.3.3 .trim修飾符 66本章小結 66習題5 66第6章 結構渲染6.1 條件渲染指令v-if 676.1.1 v-if和v-else 676.1.2 v-else-if 686.1.3 用key管理可復用的元素 696.1.4 v-if與v-show 696.2 列表渲染指令v-for 706.2.1 基本列表 716.2.2 迭代對象數組 716.2.3 對象屬性列表 736.2.4 數值範圍 736.2.5 數組更新檢測 746.2.6 v-for中key的作用 766.2.7 v-for與v-if一同使用時的註意事項 786.3 案例——匯率計算器 796.3.1 頁面結構和樣式 796.3.2 數據模型 80本章小結 82習題6 82第7章 組件基礎7.1 自定義組件與HTML標記 837.1.1 組件的名稱 847.1.2 組件的屬性 857.1.3 組件的內容 867.1.4 在組件中處理事件 867.2 全局組件與局部組件 89本章小結 91習題7 91第8章 單文件組件8.1 基礎知識 928.2 安裝Vue CLI腳手架工具 938.2.1 安裝基礎環境 948.2.2 安裝Vue CLI 958.3 動手實踐：投票頁面 978.3.1 製作greeting組件 988.3.2 製作app組件 998.3.3 父子組件之間傳遞數據 1018.3.4 構建用於生產環境的文件 1058.4 單頁應用和多頁應用 1068.4.1 單頁應用和多頁應用的區別 1068.4.2 多頁應用的開發 1078.4.3 單頁應用的開發 108本章小結 114習題8 114第9章 AJAX與axios9.1 認識axios 1159.2 axios的基礎用法 1169.2.1 基礎用法 1169.2.2 GET與POST方法 1189.2.3 嵌套請求與並發請求 1219.3 axios的進階用法 1249.3.1 創建實例 1249.3.2 實例的相關配置 1249.3.3 錯誤處理 1259.3.4 攔截器 126本章小結 130習題9 130第 10章 過渡和動畫10.1 CSS過渡 13110.2 單元素過渡 13210.2.1 transition組件 13210.2.2 過渡的類名 13310.3 動手實踐：可折疊的多級菜單 13410.3.1 搭建頁面結構 13410.3.2 展開和收起菜單 13510.3.3 添加過渡效果 13610.3.4 實現多級菜單 13710.4 列表過渡 140本章小結 142習題10 142第 11章 Vue.js插件11.1 Vue Router 14311.1.1 基本用法 14311.1.2 命名路由 14711.1.3 路由動態匹配 14811.1.4 編程式導航 15311.1.5 重定向和別名 15411.1.6 進階用法 15511.1.7 history模式 15711.2 狀態管理 15811.2.1 Vuex的基本用法 15811.2.2 深入掌握Vuex 161本章小結 169習題11 169【第二篇】 Bootstrap程序開發第 12章 Bootstrap基礎12.1 Bootstrap簡介 17312.2 下載並使用Bootstrap 17412.3 常用樣式 17612.3.1 文本樣式 17612.3.2 圖片樣式 18012.3.3 表格樣式 18112.4 圖標庫 183本章小結 185習題12 185第 13章 CSS原子化與工具類13.1 CSS原子化的理念 18613.2 Bootstrap的工具類規則 19013.3 顏色 19113.4 尺寸 19213.4.1 font-size 19313.4.2 padding和margin 19313.4.3 width和height 19413.5 佈局 19413.5.1 display 19513.5.2 flexbox 19513.5.3 實例：製作導航菜單 19613.5.4 float 19913.6 其他工具類 19913.7 動手練習：創建嵌套的留言組件 20113.7.1 搭建框架 20213.7.2 用工具類佈局 20213.7.3 頭像放右側 20213.7.4 實現佈局的嵌套 203本章小結 204習題13 204第 14章 Bootstrap的柵格佈局14.1 柵格佈局基礎 20514.1.1 柵格佈局理念 20514.1.2 上手案例 20714.1.3 理解屏幕分辨率的概念 21314.2 基本用法 21514.2.1 響應式斷點 21514.2.2 常規用法 21614.2.3 設置行間距與列間距 21814.3 高級用法 22114.3.1 柵格嵌套 22114.3.2 流式佈局 22214.3.3 設定列寬 22314.3.4 列的偏移與對齊 225本章小結 228習題14 228第 15章 Bootstrap的表單樣式15.1 表單控件樣式 22915.1.1 文本框 22915.1.2 選擇框 23315.1.3 單選框與復選框 23415.1.4 滑動條輸入 23515.1.5 輸入組 23615.2 表單佈局 23715.3 表單驗證 23915.3.1 客戶端校驗 23915.3.2 服務器端校驗 24015.4 動手練習：創建一個結賬頁面 242本章小結 242習題15 243第 16章 Bootstrap的常用組件16.1 按鈕 24416.2 反饋和提示類組件 24616.2.1 警告框 24616.2.2 加載中 24616.2.3 輕量提示 24716.2.4 模態框 25016.3 響應式導航欄 25216.4 卡片組件 25616.4.1 實例：卡片 25616.4.2 實例：瀑布流佈局的相冊 25816.5 輪播圖組件 261本章小結 262習題16 262【第三篇】 綜合實戰第 17章 綜合案例：產品著陸頁17.1 頁面結構分析 26617.2 製作頁頭和頁腳 26717.3 製作第 一屏 26817.4 製作圖文介紹 26917.5 製作課程特色 27117.6 適配平板端 27217.6.1 適配頁頭 27317.6.2 適配第 一屏 27317.6.3 適配圖文介紹 27417.6.4 適配課程特色 27517.7 適配PC端 276本章小結 279第 18章 綜合案例：“豪華版”待辦事項18.1 功能描述 28118.2 用到的知識點 28118.3 使用Vue CLI搭建項目 28218.4 頁面結構和樣式 28418.4.1 安裝並引入Bootstrap 28418.4.2 添加待辦事項 28418.4.3 篩選項 28518.4.4 任務列表 28618.4.5 編輯任務彈窗 28718.5 組件化 28818.5.1 抽離單個任務項 28918.5.2 抽離彈窗 28918.6 實現核心功能 29018.6.1 定義Todo類 29018.6.2 使用Vuex管理任務列表 29118.7 實現各項功能 29218.7.1 添加待辦事項 29218.7.2 顯示任務列表 29318.7.3 動態化篩選項 29418.7.4 修改任務狀態 29518.7.5 編輯任務 29618.7.6 刪除任務 30018.7.7 調整任務順序 30018.7.8 持久化任務 302本章小結 303
作者介紹
温谦：## 全栈工程师，前沿科技创始人，现从事企业大型软件系统的分析与开发工作，拥有20年的软件开发经验，主持并成功开发了多个复杂系统，项目实战经验丰富。## 常销书作者，毕业于华中科技大学计算机专业，主编网页设计与软件开发相关领域图书共12本，图书编写经验颇丰，其中《HTML+CSS网页设计与布局从入门到精通》《网页设计与布局项目化教程（HTML+CSS+DIV）》等图书常销10余年，被百余所高校选作教材。
